<template>
  <div class="index-page">
    <img src="/static/img/index/ibackground.jpg" class="background" >
    <div class="warp-top">
      <swiper :indicator-dots="false" indicator-color="#f3f3f3" indicator-active-color="#ffffff"
        :autoplay="true" :interval="5000" :duration="1000" :circular="true">
        <block v-for="(item, index) in imgUrls" :key="index">
          <swiper-item>
            <image :src="item" class="slide-image" mode="aspectFit" />
          </swiper-item>
        </block>
      </swiper>
    
      <div class="my-block m-28">
        
        <div class="item">
          <a href="/pages/mine-create/main">
            <img src="/static/img/index/b-1.png" mode="aspectFit">
          </a>
        </div>
        <div class="item">
          <a href="/pages/message/main">
            <img src="/static/img/index/b-2.png" mode="aspectFit">
          </a>
        </div>
      </div>
      <div class="my-block m-4">
        <div class="item">
          <a href="/pages/record-list/main">
            <img src="/static/img/index/b-3.png" mode="aspectFit">
          </a>
        </div>

        <div class="item">
          <button open-type="share" class="btn-reset">
            <img src="/static/img/index/b-4.png" mode="aspectFit">
          </button>
        </div>
      </div>

    </div>
    <tab-bar />
  </div>
</template>

<script>
import TabBar from '@/components/TabBar'
import { userLogin } from '@/utils/index'
export default {
  name: '',
  data () {
    return {
      imgUrls: [
        '/static/img/index/banner.png',
      ],
    }
  },
  components: {
    TabBar
  },
  onLoad () {
    userLogin()
    // wx.showShareMenu({
    //   withShareTicket: true
    // })
    // wx.showModal({
    //   title: JSON.stringify(that.$root.$mp.appOptions)
    // })
    // console.log(that.$root.$mp.appOptions)
    // wx.getShareInfo({
    //   shareTicket: that.$root.$mp.appOptions.withShareTicket,
    //   success (res) {
    //     wx.showToast({
    //       title: res.encryptedData
    //     })
    //   }
    // })
  },
  onShareAppMessage (res) {
    if (res.from == 'button') {
    }
    return {
      title: wx.getStorageSync('shareTitle'),
      imageUrl: wx.getStorageSync('shareImg'),
      path: '/pages/index/main',
      success (res) {
      }
    }
  },
}
</script>

<style lang="stylus" scoped>
  .navigator-hover {
    background: #fff
  }
  swiper {
    overflow: hidden
    height: 378rpx
  }
  .slide-image {
    margin: 0 auto
    width: 694rpx
    height: 378rpx
    display: block
    box-sizing: border-box
  }
  .index-page {
    position: relative
    .background {
      left: 0
      top: 0
      right: 0
      bottom: 0
      position: absolute
      width: 100%
      height: 100%
    }
    .warp-top {
      z-inde: 2
      position: relative
      padding-top: 34rpx
    }
    .m-4 {
      margin-top: -4rpx !important
    }
    .m-28 {
      margin-top: 16rpx !important
    }
    .my-block {
      display: flex
      z-inde: 10
      margin: 0 22rpx
      position: relative
      justify-content: space-between
      .item {
        float: left
        img {
          width: 346rpx
          height: 264rpx
          margin: 0 auto
        }
        p {
          font-size: 26rpx
          color: #5f5f5f
          margin-top: 16rpx
          text-align: center
        }
      }
    }
  }
</style>
